<template>
  <div class="">
    <div class="">
      <!-- :scroll="{ x: 400, y: 280 }" -->
      <a-table class="item_table" :columns="columns1" :data-source="dataSource" :pagination="false" bordered>
        <template slot="alertLevel" slot-scope="text">
          <span v-if="text == 'NORMAL'">正常</span>
          <span v-else style="color: red;">异常</span>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { httpAction, getAction } from '../../api/manage'
export default {
  props: {},
  components: {},

  data() {
    return {
      columns1: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 80,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '告警类型',
          dataIndex: 'monitorType',
          key: 'monitorType'
        },
        {
          title: '告警详情',
          dataIndex: 'alertMessage',
          key: 'alertMessage'
        },
        {
          title: '告警等级',
          dataIndex: 'alertLevel',
          key: 'alertLevel',
          scopedSlots: { customRender: 'alertLevel' }
        }
      ],

      cpuData: [],
      memoryData: [],
      storageData: [],
      dataSource: [],
      dataRelayList: [],
      url: {
        cpuUrl: '/nms/monitor/cpu',
        memoryUrl: '/nms/monitor/memory',
        storageUrl: 'nms/monitor/storage',
        dataTransSys: '/nmc/dataTransSys/list',
        recentAlarmStatus: 'dcpr/dcprPassagewayHistoryInfo/getRecentAlarmStatus'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getCpuData(), this.getMemoryData(), this.getStorageData(),this.getRecentAlarmStatus()
  },
  methods: {
    getCpuData() {
      getAction(this.url.cpuUrl).then(res => {
        console.log('res===', res)
        if (res) {
          this.dataSource.push(res)
        }
      })
    },
    getMemoryData() {
      getAction(this.url.memoryUrl).then(res => {
        if (res) {
          this.dataSource.push(res)
        }
      })
    },
    getStorageData() {
      getAction(this.url.storageUrl).then(res => {
        if (res) {
          this.dataSource.push(res)
        }
      })
    },
    getDataRelay() {
      getAction(this.url.dataTransSys).then(res => {
        console.log('res111', res)
        if (res.success) {
          this.dataRelayList = res.result.records
        }
      })
    },
    getRecentAlarmStatus() {
      getAction(this.url.recentAlarmStatus)
      .then(res => {
        if(res.success) {

        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 一行 2 列 */
  gap: 16px; /* 列间距，按需调 */
}
.item {
  /* 表格宽度自适应 */
  width: 100%;
  border: 1px solid #17dcff;
  padding: 5px;
  // height: 400px;
  .item_table {
    // height: 350px;
  }
}
</style>
